<template>
  <div class="props">
    <a-form-model>
      <a-form-model-item label="区域坐标集" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
        <a-input v-model="position" />
      </a-form-model-item>
      <a-form-model-item label="区域高度" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
        <a-input v-model="high" />
      </a-form-model-item>
      <a-form-model-item label="">
        <a-row :gutter="10">
          <a-col :span="8" style="text-align: center">
            <a-button type="primary" @click="startPickPosition">绘制区域</a-button>
          </a-col>
          <a-col :span="8" style="text-align: center">
            <a-button type="primary" @click="endPickPosition">结束绘制</a-button>
          </a-col>
          <a-col :span="8" style="text-align: center">
            <a-button type="primary" @click="preview(true)">预览</a-button>
          </a-col>
        </a-row>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
export default {
  props: {
    locations: {
      type: Array,
      default: () => [],
    },
    height: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      position: '', //定位集合
      high: 0, //高度
      clickStatus: '',
    }
  },
  methods: {
    LEFT_CLICK(movement) {
      // 地图点击事件
      if (this.clickStatus === 'start') {
        this.addPolygonEntities(movement, 'fence')
      } else {
        this.$message.error('请点击绘制区域功能按钮')
      }
    },
    startPickPosition() {
      // 设置绘制点位的开始flag
      this.clickStatus = 'start'
      const { viewer } = window.cesiumInstance
      //重新绘制
      this.position = ''
      this.high = 0
      viewer.entities.removeAll()
    },
    endPickPosition() {
      if (!this.high) {
        return this.$message.error('请设置高度')
      }
      this.clickStatus = 'end'
      let _locations = [],
        locations = this.position.split(',')
      for (let i = 0; i < locations.length; i += 2) {
        let obj = {}
        obj.lng = locations[i]
        obj.lat = locations[i + 1]
        _locations.push(obj)
      }
      this.$emit('getPoint', {
        locations: _locations,
        height: this.high,
      })
    },
    addPolygonEntities(movement, entityId) {
      // 添加标记点，标记出点击的位置
      const { Cesium, viewer } = window.cesiumInstance
      const ellipsoid = viewer.scene.globe.ellipsoid
      let cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid)
      if (cartesian) {
        //将笛卡尔坐标转换为地理坐标
        let cartographic = ellipsoid.cartesianToCartographic(cartesian)
        //将弧度转为度的十进制度表示
        let longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
        let latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(longitudeString, latitudeString, 0),
          point: {
            color: Cesium.Color.RED,
            pixelSize: 8,
          },
        })
        this.position = this.position
          ? `${this.position},${longitudeString},${latitudeString}`
          : `${longitudeString},${latitudeString}`

        let factoryBoundary = viewer.entities.getById(entityId)
        if (factoryBoundary) {
          viewer.entities.remove(factoryBoundary)
        }
        viewer.entities.add({
          id: entityId,
          polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArray(this.position.split(',')),
            height: 0,
            extrudedHeight: 0,
            fill: false,
            outline: true,
            outlineColor: Cesium.Color.RED,
            outlineWidth: 3.0,
          },
        })
      }
    },
    //预览区域数据 flag true 阻止摄像头聚焦
    preview(flag) {
      const { Cesium, viewer } = window.cesiumInstance
      viewer.entities.removeAll()
      const { high, position } = this
      //组合墙体坐标系Cartesian3
      let _ArrayHeights = [],
        _minimumHeights = [],
        _position = position.split(',')
      for (let i = 0; i < _position.length; i += 2) {
        _ArrayHeights.push(_position[i], _position[i + 1], 0)
        _minimumHeights.push(high)
      }
      //添加坐标级第一个点画图
      _ArrayHeights.push(_position[0], _position[1], 0)
      _minimumHeights.push(high)

      let entity = viewer.entities.add({
        id: 'fence',
        wall: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(_ArrayHeights),
          material: new Cesium.Color.fromCssColorString('red').withAlpha(0.5),
          minimumHeights: _minimumHeights,
          outline: true,
          outlineColor: new Cesium.Color.fromCssColorString('red'),
          outlineWidth: 2.0,
        },
      })

      // 获取多边形的坐标集
      let polyPositions = Cesium.Cartesian3.fromDegreesArray(position.split(','))
      //获取多边形中心点的坐标信息
      let polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center
      //坐标信息转换为可用于计算的坐标单位
      let cartographic = Cesium.Cartographic.fromCartesian(polyCenter)
      // 最终换成经纬度
      let lng = Cesium.Math.toDegrees(cartographic.longitude)
      let lat = Cesium.Math.toDegrees(cartographic.latitude)
      entity.position = Cesium.Cartesian3.fromDegrees(lng, lat, high/2)
      entity.label = {
        text: '电子围栏',
        show: true,
        showBackground: true,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        font: '15px sans-serif',
        distanceDisplayCondition: { near: 0, far: 5000 }, //距离镜头多远的距离将不显示
        disableDepthTestDistance: 5000, //设置标签的显示不会被覆盖
      }
      if (flag) {
        viewer.flyTo(entity, { duration: 2.0 })
        this.endPickPosition()
      }
    },
    checkArea() {
      if (this.locations.length != 0 && this.height != '') {
        let _area = []
        this.locations.map((item) => {
          _area.push(item.lng, item.lat)
        })
        this.position = _area.join(',')
        this.high = this.height
        this.preview(false)
      }
    },
  },
  mounted() {
    console.log(this.locations, this.height)
    this.checkArea()
  },
}
</script>
<style lang="less" scoped>
.props /deep/.ant-form-item-label label,
.props /deep/.ant-radio-wrapper,
.props /deep/.ant-radio-disabled + span {
  color: white !important;
}
.props /deep/ .ant-form-item {
  margin-bottom: 10px;
}
</style>